<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
<div class="shadow">
    <img id="close"  src="close.jpg">

</div>

<style>
    .shadow{
        position: absolute;
        top: 100px;
        bottom: 100px;
        left: 300px;
        right: 300px;
        background-color: black;
        display: none;

    }
    .shadow img{
        float: right;
    }
    .box{
        width: 160px;
        height: 160px;

        box-sizing: border-box;
        float: left;
        text-align: center;

    }
    .pt{padding: 12.5px 0 12.5px 0 ;
        background-image: url("framept.jpg");
    }
    .ls{
        padding: 35px 0 35px 0 ;
        background-image: url("framels.jpg");
    }
    .pt:hover{padding: 12.5px 0 12.5px 0 ;
        background-image: url("framept_hover.jpg");
    }
    .ls:hover{
        padding: 35px 0 35px 0 ;
        background-image: url("framels_hover.jpg");
    }
</style>
<script>

    $(function(){

        for(var i=1;i<=30;i++){
            $("body").append("<div class='box'><img  src='photo/thumb/"+i+".jpg'/></div>");
        }

        $("img").not($("#close")).click(function(){
            $(".shadow").show();

        })
        $("#close").click(function(){
            $(".shadow").hide();
        })

    })
    $(window).load(function(){
        var imgs=$("img").not($("#close"));
        for (var i=0;i<30;i++){
            var h=imgs.eq(i).height();
            var w=imgs.eq(i).width();

            if(h>w){
                $(".box").eq(i).addClass("pt");

            }else{
                $(".box").eq(i).addClass("ls");

            }
        }

    })


</script>


</body>
<ml>
